<script setup>
import {reactive, ref} from "vue";
import request9191 from "../../../utils/request9191.js";
import {ElMessage} from "element-plus";

const dialogFormVisible = ref(false)
const formLabelWidth = "140px"

const aaa = ref(false)
//新增社团属性
const form = ref({
  cname:'',
  ctype:'',
  cheader:'',
  cpeople:'',
  ctypeNumber:''
})

//修改社团属性
const updateForm = ref({
  cid:'',
  cname:'',
  ctype:'',
  cheader:'',
  cpeople:'',
  ctypeNumber:''
})

//我的社团
const clubInfosData = ref()
//查看社团成员
const dialogTableVisible = ref(false)

//获取本行社团信息
const getClubRow =(row)=>{
  updateForm.value.cid=row.cid
  updateForm.value.cname=row.cname
  updateForm.value.ctype=row.ctype
  updateForm.value.cheader=row.cheader
  updateForm.value.cpeople=row.cpeople
  updateForm.value.ctypeNumber=row.ctypeNumber
}

//修改社团信息
const updateClub =() => {
  request9191({
    url: '/club/updateClub',
    method: 'put',
    data: {
      cid:updateForm.value.cid,
      cname: updateForm.value.cname,
      ctype: updateForm.value.ctype,
      cheader: updateForm.value.cheader,
      cpeople: updateForm.value.cpeople,
      ctypeNumber: updateForm.value.ctypeNumber
    }
  }).then((res)=>{
    ElMessage.success("修改成功")
    getClubInfos()
    aaa.value=false;
  })
}
//查看社团成员数据
const studentData = ref()

//获得自己社团的所有成员
const getStudentData =() =>{
  request9191({
    url: '/clubJoin/getByHeader',
    method: 'get',
    params:{
      header: sessionStorage.getItem("name")//这里的header和后端接收的header要写一样
    }
  }).then((res)=>{
    studentData.value = res.data.data
  })
}

//获取我的社团信息
const getClubInfos =()=>{
  if ((sessionStorage.getItem("name")) === null){
      ElMessage.error("请先登录")
    return
  }
  request9191({
    url: '/club/getByHeader',
    method: 'get',
    params:{
      cHeader:sessionStorage.getItem("name")
    }
  }).then((res)=>{
    clubInfosData.value=res.data.data
  })
}

//新增社团
const getAddClub=() =>{
  if (sessionStorage.getItem("name") === null){
    ElMessage.error("请登录")
    return
  }
  if ((form.value.cname === null || form.value.cname === '') ||
      (form.value.ctype === null || form.value.ctype === '') ||
      (form.value.cheader === null || form.value.cheader === '') ||
      (form.value.cpeople === null || form.value.cpeople === '') ||
      (form.value.ctypeNumber === null || form.value.ctypeNumber === ''))
  {
    ElMessage.error("请填写完整")
    return
  }
  request9191({
    url: '/club/addClub',
    method:'post',
    data:{
      cname:form.value.cname,
      ctype:form.value.ctype,
      cheader:form.value.cheader,
      cpeople:form.value.cpeople,
      ctypeNumber:form.value.ctypeNumber
    }
  }).then((res)=>{
    ElMessage.success("提交成功")
    clearAddClub()
    dialogFormVisible.value=false;
    getClubInfos()
  })
}

//新增社团校验
const getAddClubRules = ref({
  cname:[
    {required: true, message: "请输入社团名称", trigger: "blur"}
  ],
  ctype:[
    {required: true, message: "请选择社团类别", trigger: "blur"}
  ],
  cheader:[
    {required: true, message: "请输入社团团长", trigger: "blur"}
  ],
  cpeople:[
    {required: true, message: "请输入社团人数", trigger: "blur"}
  ],
  ctypeNumber:[
    {
      required: true, message: "请输入社团编号", trigger: "blur",
      pattern: /^[0-9]{4}$/,
    }
  ]
})
//新增社团,修改社团取消
const cancel = () =>{
  ElMessage.info("您已取消")
  clearAddClub();
  dialogFormVisible.value=false;
  aaa.value=false;
}


//清空数据
const clearAddClub = () =>{
  form.value.cname=''
  form.value.cheader=''
  form.value.cpeople=''
  form.value.ctypeNumber=''
  form.value.ctype=''
}

getClubInfos()
getStudentData()
</script>

<template>

<div class="MyClub">
  <div class="header_top">
    <el-button plain @click="dialogFormVisible = true" type="primary">
      新增社团
    </el-button>
  </div>
  <el-card>
    <el-table :data="clubInfosData" style="width: 100% " border="border">
      <el-table-column prop="cname" label="社团名称" width="140px"/>
      <el-table-column prop="ctype" label="社团类别" width="140px"/>
      <el-table-column prop="cheader" label="社团团长" width="150px"/>
      <el-table-column prop="cpeople" label="社团人数" width="100px"/>
      <el-table-column prop="ccreateTime" label="社团成立时间" width="160px"/>
      <el-table-column prop="ctypeNumber" label="社团编号" width="100px"/>
      <el-table-column label="状态" width="100px">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
          <el-tag v-else type="danger">已驳回</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" >
        <template #default="scope">
            <el-button type="success" @click="dialogTableVisible = true;getStudentData()" >查看所有成员</el-button>
            <el-button type="info" @click="aaa= true ; getClubRow(scope.row)"  style="margin-left: 20px">修改社团信息</el-button>
        </template>
      </el-table-column>

    </el-table>
  </el-card>
</div>


  <!--新增社团弹框-->
  <el-dialog v-model="dialogFormVisible" title="填写社团信息" width="500" center>
    <el-form :model="form" :rules="getAddClubRules">
      <el-form-item label="社团名称" :label-width="formLabelWidth" prop="cname">
        <el-input v-model="form.cname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社团类别" :label-width="formLabelWidth" prop="ctype">
        <el-select v-model="form.ctype" placeholder="请选择一个社团类型">
          <el-option label="学术科技类" value="学术科技类"  />
          <el-option label="文艺体育类" value="文艺体育类"  />
          <el-option label="公益服务类" value="公益服务类"  />
          <el-option label="职业发展类" value="职业发展类"  />
          <el-option label="国际交流类" value="国际交流类"  />
          <el-option label="创新创业类" value="创新创业类"  />
          <el-option label="娱乐休闲类" value="娱乐休闲类"  />
        </el-select>
      </el-form-item>
      <el-form-item label="社团团长" :label-width="formLabelWidth" prop="cheader">
        <el-input v-model="form.cheader" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社团人数" :label-width="formLabelWidth" prop="cpeople">
        <el-input v-model="form.cpeople" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社团编号" :label-width="formLabelWidth" prop="ctypeNumber">
        <el-input v-model="form.ctypeNumber" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="getAddClub()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

<!--查看所有成员弹框-->
  <el-dialog v-model="dialogTableVisible" width="600">
    <el-table :data="studentData">
      <el-table-column property="sname" label="学生姓名" width="150" />
      <el-table-column property="sclass" label="学生班级" width="200" />
      <el-table-column property="sphone" label="电话号" width="200"/>
    </el-table>
  </el-dialog>

<!--修改社团信息弹框-->
  <el-dialog v-model="aaa" title="修改社团信息" width="500" center>
    <el-form :model="updateForm" :rules="getAddClubRules">
      <el-form-item label="社团名称" :label-width="formLabelWidth" prop="cname">
        <el-input v-model="updateForm.cname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社团类别" :label-width="formLabelWidth" prop="ctype">
        <el-select v-model="updateForm.ctype" placeholder="请选择一个社团类型">
          <el-option label="学术科技类" value="学术科技类"  />
          <el-option label="文艺体育类" value="文艺体育类"  />
          <el-option label="公益服务类" value="公益服务类"  />
          <el-option label="职业发展类" value="职业发展类"  />
          <el-option label="国际交流类" value="国际交流类"  />
          <el-option label="创新创业类" value="创新创业类"  />
          <el-option label="娱乐休闲类" value="娱乐休闲类"  />
        </el-select>
      </el-form-item>
      <el-form-item label="社团团长" :label-width="formLabelWidth" prop="cheader">
        <el-input v-model="updateForm.cheader" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社团人数" :label-width="formLabelWidth" prop="cpeople">
        <el-input v-model="updateForm.cpeople" autocomplete="off" />
      </el-form-item>
      <el-form-item label="社团编号" :label-width="formLabelWidth" prop="ctypeNumber">
        <el-input v-model="updateForm.ctypeNumber" autocomplete="off" />
      </el-form-item>
    </el-form>
      <div class="dialog-footer" style="text-align: center">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="success" @click="updateClub()">
          修改
        </el-button>
      </div>
  </el-dialog>


</template>



<style scoped>
.header_top{
  margin-bottom: 20px;
}
</style>